<template>
	<view>
		<u-gap></u-gap>

		<view class="money">
			<view class="">应支付金额：</view>
			<view class="">￥<text>{{money}}</text></view>
		</view>

		<u-gap></u-gap>
		<view class="pay">

			<view class="item" v-for="(item, index) in pays" @click="checkType(index)">
				<view class="item-left">
					<u-image :src="appletImgUrl+item.icon" mode="widthFix" width="60" height="60"></u-image>
					<view class="info">
						<view class="">{{item.title}}</view>
						<view class="">{{item.tip}}</view>
					</view>

				</view>
				<view class="item-right">
					<checkbox :value="item.name" color="#FFCC33" :checked="curIndex==index"
						style="transform:scale(0.7)" />
				</view>
			</view>

		</view>
		<view class="btn">
			<view class="info" @click="pay">
				确认支付
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>

		<u-popup :show="show" @close="close" @open="open">
			<view class="popup">
				<view class="title">输入支付密码</view>
				<view class="wordbox"><u-code-input v-model="password" :maxlength="6" mode="box" dot></u-code-input></view>
				
				
				<view class="popup-btn">
					<view class="btn-box" @click="cashPay">
						确定
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		appletImgUrl
	} from "@/common/config.js"
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	export default {
		data() {
			return {
				appletImgUrl: appletImgUrl,
				checked: true,
				show: false,
				password: '',
				pays: [{
						title: '微信支付',
						tip: '极速 安全 新体验',
						icon: 'wx.png',
						payType: 'MINI_PAY',
						checked: false,
						name: "1"
					},
					{
						title: '钱包余额',
						tip: '方便 快捷',
						icon: 'xfq.png',
						payType: 'CASH_PAY',
						checked: false,
						name: "2"
					},
					{
						title: '积分支付',
						tip: '安全 快捷',
						icon: 'remittance.png',
						payType: 'INTEGRAL',
						checked: false,
						name: "3"
					}
				],
				money: 0,
				scene: '',
				currentPay: "",
				payOrderNumber: "",
				mainGoodsType: null,
				payType: "",
				rewardIntegral: 0,
				checkDisabled: false,
				checkboxValue1: [],
				curIndex: 0,
				deviceNumber: "",
				IntegralTotal:0

			};
		},
		onUnload() {
			if (this.scene == 'order' || this.payState) return

		},
		onLoad(options) {
			console.log(options)
			this.deviceNumber = options.deviceNumber;
			this.payType = this.pays[this.curIndex].payType;
			this.getIntegral();
			this.getdeviceInfo();


		},
		methods: {
			getdeviceInfo() {
				let that = this;
				httpPost("/api/iotmerchantsdevice/payActivate",{deviceNumber:this.deviceNumber})
					.then((res) => {
						if (res.code == 0) {
                             that.money=res.data.payPrice;
						}
					})
					.catch((e) => {});
			},
			getIntegral() {
				let that = this;
				httpGet("/api/iotmerchantsdevice/myDeviceIntegral")
					.then((res) => {
						if (res.code == 0) {
			                that.IntegralTotal=res.data;
						}
					})
					.catch((e) => {});
			},
			cashPay() {
				let that = this;
				let payType = this.pays[this.curIndex].payType;
				if (payType == 'CASH_PAY') { //余额支付
					httpPost("/api/iotmerchantsdevice/payActivate", {
							deviceNumber: that.deviceNumber,
							payPrice: that.money,
							userName: ""
						})
						.then((res) => {
							if (res.code == 0) {

							}
						})
						.catch((e) => {});

				}
			},
			choicePay(item) {
				console.log(item)
				this.pays.forEach(item => item.checked = false)
				item.checked = true;
				this.currentPay = item.payType;
			},
			pay() {
				const that = this
				let payType = this.pays[this.curIndex].payType;
				if (payType == 'CASH_PAY') { //余额支付
					this.show = true
					return
				}
				if (payType == 'TRANSFER') { //汇款支付
					uni.navigateTo({
						url: "/pages/equipmentManagement/remitPay?payType=TRANSFER&money=" + that.money
					});
					return
				}
				httpPost("/api/iotmerchantsdevice/payActivate", {
						deviceNumber: that.deviceNumber,
						payPrice: that.money,
						userName: ""
					})
					.then((res) => {
						if (res.code == 0) {
							let payStr = JSON.parse(res.payStr)
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: payStr.timeStamp,
								nonceStr: payStr.nonceStr,
								package: payStr.package,
								signType: payStr.signType,
								paySign: payStr.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '支付成功！'
									})
									
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							});
						}
					})
					.catch((e) => {});

			},

			checkboxChange(e) {
				console.log(e)
			},
			checkType(index) {
				this.curIndex = index;
			},
			close() {
				this.show = false;
			},
			open() {
				this.show = true;
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		padding-bottom: 30rpx;

		.popup-btn {
			color: #FFFFFF;
			margin: 0 30rpx;
			margin-top: 100rpx;

			.btn-box {
				line-height: 100rpx;
				background: linear-gradient(90deg, #FF3868, #FC6161);
				box-shadow: 1rpx 10rpx 15rpx 2rpx rgba(255, 78, 70, 0.3);
				border-radius: 20rpx;
				text-align: center;
			}
		}

		.title {
			text-align: center;
			line-height: 100rpx;
			border-bottom: 1rpx solid #EBEBEB;
		}
	}

	.btn {
		width: 690rpx;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);

		.info {
			background: linear-gradient(90deg, #FF3768, #FC6161);
			box-shadow: 0px 10rpx 14rpx 2rpx rgba(255, 77, 70, 0.3);
			border-radius: 20rpx;
			color: #FFFFFF;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
		}
	}

	.pay {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;
		padding-right: 0;

		.item {
			padding: 30rpx 0;
			display: flex;
			width: 100%;
			align-items: center;
			border-bottom: 1rpx solid #E7E6E6;
			justify-content: space-between;
			flex-direction: row;

			.item-left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}

			&:last-child {
				border-bottom: none;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;

				view {
					&:first-child {
						font-size: 28rpx;
					}

					&:last-child {
						font-size: 24rpx;
						color: #aaaaaa;
					}
				}
			}
		}
	}

	.money {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 50rpx 0;

		view {
			&:first-child {
				font-size: 26rpx;
			}

			&:last-child {
				margin-top: 10rpx;
				color: #FF4D46;
				font-size: 30rpx;

				text {
					font-size: 48rpx;
					font-weight: bold;
				}
			}
		}

		text-align: center;
	}

	page {
		background-color: $u-bg-color;
	}
	.wordbox{
		margin-top: 100rpx;
		text-align: center;
	    flex-direction: row;
		justify-content: center;
		display: flex;
	}
</style>